<script setup>
import { storeToRefs } from 'pinia'

import { useMultipleUIStore } from '@/stores/multipleTaskUI.js'
import selectChange from '@/composables/MultipleTables/changeSelect.js'
import { useMultipleTaskData } from '@/stores/multipleTaskData.js'
import { useFormStore } from '@/stores/formData.js'

const multipleUIStore = useMultipleUIStore()
const { btnData, selectDisabled, excelDisabled, drawingBtnDisabled } = storeToRefs(multipleUIStore)

const { calcIndicator, calcStatistical,data2excel, drawingCharts } = selectChange()

const multipleTaskData = useMultipleTaskData()
const {
  indicator, indicators, multi_statistical_result, statisticalOption, savePdf,
  selectedProblems, selectedAlgorithms, algorithmList, problemList, best_value_index
} = storeToRefs(multipleTaskData)
const { statisticalOptions } = multipleTaskData

const formStore = useFormStore()
const { formData } = storeToRefs(formStore)

const drawer = ref(false)
const innerDrawer = ref(false)

</script>

<template>
  <div class="table-content">
    <div class="head-bar">
      <div class="left-bar">
        <el-button type="primary" :disabled="value.disabled" circle round v-for="(value,key) in btnData"
                   @click="multipleUIStore.btnIntoTable(key)">{{ value.name }}
        </el-button>
      </div>
      <div class="right-bar">
        <el-button @click="data2excel" :disabled="excelDisabled">data2excel</el-button>
        <IndicatorSelect :calcIndicator="calcIndicator" v-model="indicator" :indicators="indicators"
                         :selectDisabled="selectDisabled" />
        <el-select v-model="statisticalOption" placeholder="Select" size="default" @change="calcStatistical"
                   :disabled="selectDisabled"
                   style="width: 120px;margin-left: 15px">
          <el-option
            v-for="item in statisticalOptions"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
        <el-button type="primary" style="margin-left: 16px" @click="drawer = true" :disabled="excelDisabled">
          drawing
        </el-button>
      </div>
    </div>
    <table v-if="multipleTaskData.tableHead.length != 0">
      <thead>
      <tr>
        <th></th>
        <template v-for="(value,key) in btnData">
          <th v-if="value.intoTable">{{ value.name }}</th>
        </template>
        <th v-for="item in multipleTaskData.tableHead">{{ item }}</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item,index) in multipleTaskData.tableRows">
        <td>{{ item }}</td>
        <template v-for="(value,key) in btnData">
          <th v-if="value.intoTable">{{ formData[key] }}</th>
        </template>
        <template v-if="multipleTaskData.tableValues[multipleTaskData.indicator]">
          <td :class="{is_best:best_value_index[multipleTaskData.indicator][index][rowIndex]}"
              v-for="(item,rowIndex) in multipleTaskData.tableValues[multipleTaskData.indicator][index]">{{ item }}
            {{ multi_statistical_result[multipleTaskData.indicator][multipleTaskData.statisticalOption][index][rowIndex] }}
          </td>
        </template>
      </tr>
      <tr v-if="multipleTaskData.indicator != 'num of run'">
        <td>+/-/=</td>
        <template v-for="(value,key) in btnData">
          <th v-if="value.intoTable"></th>
        </template>
        <td
          v-for="item in multi_statistical_result[multipleTaskData.indicator][multipleTaskData.statisticalOption][multi_statistical_result[multipleTaskData.indicator][multipleTaskData.statisticalOption].length-1]">
          {{ item }}
        </td>
        <td></td>
      </tr>
      </tbody>
    </table>

    <el-empty v-else description="No data" />

    <el-drawer v-model="drawer">
      <div style="display: flex;flex-direction: column;align-items: center;">
        <ElButtonGroup style="margin-bottom: 10px;">
          <el-button type="primary" @click="drawingCharts('dec')" :disabled="drawingBtnDisabled">dec</el-button>
          <el-button @click="drawingCharts('obj')" :disabled="drawingBtnDisabled">obj</el-button>
          <el-button type="primary" @click="drawingCharts('metric')" :disabled="drawingBtnDisabled">metric</el-button>
        </ElButtonGroup>
        <el-switch
          v-model="savePdf"
          class="mb-2"
          :disabled="drawingBtnDisabled"
          active-text="save to pdf"
          inactive-text="no save"
        />
        <el-transfer :titles="['problems', 'selected']" v-model="selectedProblems" :data="problemList"
                     style="margin-bottom: 10px;" />
        <el-transfer :titles="['algorithms', 'selected']" v-model="selectedAlgorithms" :data="algorithmList" />
      </div>

    </el-drawer>


  </div>
</template>
<style lang="scss">
.table-content {
  .head-bar {
    display: flex;
    margin-bottom: 20px;
    justify-content: space-between;
    align-items: center;
    height: 45px;
    padding: 0 5px;
    min-width: 650px;
    background-color: skyblue;
  }
}
table {
  width: 90%;
  border-collapse: collapse;
  box-shadow: 0 0 10px;
  margin: 0 auto;
  box-sizing: content-box;
  td, th {
    text-align: center; /* 或 left、right、justify */
    border: 1px solid;
    white-space: nowrap;
    padding: 5px;
  }
  .is_best {
    font-weight: bold;
  }
}

</style>

